<template>
  <view
    class="formComtainer"
    :style="{
      height: `calc(100vh - 46px - 45px - ${extraHeight})`
    }"
  >
    <view class="formWrapper">
      <uni-forms
        ref="form"
        validate-trigger="bind"
        :rules="type === 'add' ? props.formRules : {}"
        :model="formField"
        label-width="280rpx"
      >
        <uni-forms-item
          :required="item.required"
          :class="{
            noRequired: !item.required,
            'form-item-border': !noBorder.includes(item.formType)
          }"
          class="form-item"
          :label="item.label"
          :name="item.name"
          v-for="item in props.formList"
          :key="item.name"
        >
          <uni-easyinput
            :disabled="type === 'preview'"
            @blur="binddata(item.name, $event.detail.value)"
            :inputBorder="false"
            v-model="formField[item.name]"
            v-if="item.formType === 'input'"
            v-bind="item"
          ></uni-easyinput>
          <zxz-uni-data-select
            :disabled="type === 'preview'"
            class="noBorder"
            @change="
              binddata(item.name, $event),
                emits('selectChange', {
                  value: $event,
                  field: item.name
                })
            "
            v-else-if="item.formType === 'select'"
            v-model="formField[item.name]"
            :localdata="item.options"
            :multiple="item.multiple"
          >
          </zxz-uni-data-select>
          <!-- <uni-data-select></uni-data-select> -->
          <van-uploader
            :max-count="1"
            reupload
            v-else-if="item.formType === 'upload'"
            :after-read="(file) => afterRead(file, item.name)"
          >
            <view class="custom-upload" v-if="!formField[item.name]"> + </view>
            <view class="custom-upload" v-else>
              <image
                style="width: 100%; height: 100%"
                :src="formField[item.name]"
                mode="scaleToFill"
              />
            </view>
          </van-uploader>
          <uni-datetime-picker
            @change="binddata(item.name, $event)"
            :border="false"
            v-model="formField[item.name]"
            v-else-if="item.formType === 'date'"
            type="date"
          />
          <!-- <uni-file-picker v-else-if="item.formType === 'upload'"></uni-file-picker> -->
          <uni-data-checkbox
            :placement="item.placement || 'bottom'"
            :disabled="type === 'preview'"
            @change="binddata(item.name, $event.detail.value)"
            style="margin-top: 6px"
            v-else-if="item.formType === 'radio'"
            v-model="formField[item.name]"
            :localdata="item.options"
          ></uni-data-checkbox>
          <TimePicker
            v-model:value="formField[item.name]"
            v-else-if="item.formType === 'timeRange'"
          />
          <CCascader
            @blur="binddata(item.name, value)"
            v-model:value="formField[item.name]"
            v-else-if="item.formType === 'cascader'"
          />
        </uni-forms-item>
        <slot></slot>
      </uni-forms>
    </view>
    <view style="margin: 0 16px" v-if="type === 'add'">
      <button @click="onSubmit" block class="submitBtn">确认提交</button>
    </view>
  </view>
</template>

<script setup>
import TimePicker from "../timePicker/timePicker.vue"
import { uploadImg } from "@/apis/user"
import { ref, computed } from "vue"
import CCascader from "../CCascader"
const emits = defineEmits(["update:formData", "submit", "emitSubmit"])
const noBorder = ["upload", "timeRange", "selectChange"]
const props = defineProps({
  formRules: {
    type: Object,
    default: () => {}
  },
  formData: {
    type: Object,
    default: () => {
      return {}
    }
  },
  formList: {
    type: Array,
    default: () => []
  },
  extraHeight: {
    type: String,
    default: "0px"
  },
  type: {
    type: String,
    default: "add"
  }
})
const form = ref(null)
const showPicker = ref(false)
const currentDate = ref([])
const formField = computed({
  get() {
    return props.formData
  },
  set(val) {
    emits("update:formData", val)
  }
})
const onSubmit = () => {
  form.value
    .validate()
    .then((valid) => {
      emits("submit", form)
      emits("emitSubmit")
    })
    .catch((err) => {
      console.log(err)
    })
}
const afterRead = (file, name) => {
  console.log(file, "file")
  uni.uploadFile({
    url: "https://haici.snooowball.cn/api/user/uploadImg", //仅为示例，非真实的接口地址
    filePath: file.objectUrl,
    name: "file",
    formData: {
      // 'user': 'test'
    },
    success: (uploadFileRes) => {
      let datas = JSON.parse(uploadFileRes.data)
      formField.value[name] = datas.data.url
    }
  })
}
defineExpose({
  form
})
</script>

<style lang="scss" scoped>
.formComtainer {
  padding: 24rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .formWrapper {
    flex: 1;
    overflow-y: auto;
  }
}

.form-item {
  margin-bottom: 32rpx;
  border-radius: 6px;
  // border: 1px solid #409eff;
  padding: 6px;
  :deep(.is-required) {
    margin-top: 8px;
    margin-right: 8px;
  }
}

:deep(.uni-forms-item__label) {
  color: #000;
  font-size: 24rpx;
}

.form-item-border {
  border: 1px solid #fcf7f7;
}

.noRequired {
  :deep(.uni-forms-item__label) {
    padding-left: 16px;
  }
}
.submitBtn {
  height: 45px;
  line-height: 45px;
  color: rgba(0, 0, 0, 1);
  background-color: rgba(204, 204, 204, 1);
}
.custom-upload {
  width: 236rpx;
  height: 236rpx;
  border-radius: 6px;
  background: rgba(255, 255, 255, 1);

  border: 1px solid rgba(236, 236, 236, 1);
  color: rgba(236, 236, 236, 1);
  font-size: 60rpx;
  text-align: center;
  line-height: 236rpx;
  font-weight: 500;
}
.button-style {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 96rpx;
}
</style>
